<template>
  <div v-for="(category, index) in categoryList" :key="index" class="category-list">
    <div class="tag">
      <div class="tag-title">{{ changeNumToHan(index + 1) }}级分类</div>
      <div class="tag-item">
        <div
          v-for="(itemSub, indexSub) in category.list"
          :key="indexSub"
          :data-id="itemSub.id"
          class="tag-item-name"
          :class="{ active: category.activeId === itemSub.id }"
          @click="handleClick(index, category, itemSub)"
        >
          {{ itemSub.categoryName }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { changeNumToHan } from '~/utils/base'
  import { indexApi } from '~/api'

  const emit = defineEmits(['update:modelValue', 'change'])

  const props = defineProps({
    modelValue: { type: String, default: '' },
    defaultValue: { type: String, default: '' }
  })

  // 选中分类
  let selectCategory = []

  // 点击分类
  const handleClick = (indexParent, rowParent, row) => {
    if (rowParent.activeId !== row.id) {
      rowParent.activeId = row.id
      emit('update:modelValue', row.id)
      emit('change')
      handleChange(indexParent, row)
    }
  }

  // 逻辑处理
  const handleChange = (index, row) => {
    if (selectCategory[index] !== row.id) {
      selectCategory[index] = row.id
      if (row.list && row.list.length) {
        if (categoryList.value.length > index + 1) {
          categoryList.value.length = index + 1
        }
        categoryList.value.push({
          activeId: row.id,
          list: [{ id: row.id, categoryName: '全部' }].concat(row.list)
        })
      } else {
        categoryList.value.length = index + 1
        selectCategory.length = index + 1
      }
    }
  }

  // 初始化分类
  const categoryList = ref([])
  const initCategory = (categoryRes) => {
    if (props.defaultValue) {
      const classifyIdObj = {}
      const key = []
      const init = (list, prefixId) => {
        list.forEach((e) => {
          if (e.id) {
            const id = prefixId ? prefixId + '_' + e.id : e.id
            key.push(id)
            classifyIdObj[e.id] = e
            if (e.list && e.list.length) {
              return init(e.list, id)
            }
          }
        })
      }
      init(categoryRes, '')
      const lists = key.filter((e) => e.indexOf(props.defaultValue) > -1)
      if (lists && lists.length) {
        lists.sort((a, b) => {
          return a.length - b.length
        })
        const ids = lists[0].split('_')
        if (ids && ids.length) {
          categoryList.value.push({
            activeId: ids[0],
            list: [{ id: '', categoryName: '全部' }].concat(categoryRes)
          })
          ids.forEach((id, index) => {
            const item = classifyIdObj[id]
            if (item) {
              selectCategory.push(id)
              if (item.list.length) {
                categoryList.value.push({
                  activeId: ids[index + 1] || id,
                  list: [{ id: id, categoryName: '全部' }].concat(item.list)
                })
              }
            }
          })
        }
      }
    } else {
      categoryList.value.push({
        activeId: '',
        list: [{ id: '', categoryName: '全部' }].concat(categoryRes)
      })
    }
  }

  onMounted(async () => {
    // 分类列表
    const res = await indexApi.categoryList()
    selectCategory = []
    initCategory(res)
  })
</script>

<style scoped lang="scss">
  .category-list {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    line-height: 20px;
  }
</style>
